<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>个人信息表</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<style>
	form{
		width: 50%;
		border-collapse: collapse;
		margin-left: auto;
		margin-right: auto;
	}.avatar-container {
		text-align: center; /* 使头像和上传按钮居中 */
		margin-top: 50px;
    }.avatar {
		width: 150px; /* 设置头像的宽度 */
		height: 150px; /* 设置头像的高度 */
		border-radius: 50%; /* 设置头像为圆形 */
		margin-bottom: 20px; /* 添加一些间距 */
	}
</style>
</head>
<body>
	<form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
	  <div class="avatar-container">
	      <img src="imgs/lion.jpg" alt="默认头像" class="avatar" id="avatar-preview">
	      <label for="avatar-input" class="layui-btn">修改头像</label>
	      <input type="file" id="avatar-input" accept="image/*" style="display:none;">
	  </div>
	  <div class="layui-form-item">
		<label class="layui-form-label">账号</label>
		<div class="layui-input-block">
		  <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
		</div>
	  </div>
	  <div class="layui-form-item">
	  		<label class="layui-form-label">密码</label>
	  		<div class="layui-input-block">
	  		  <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
	  		</div>
	  </div>
	  <div class="layui-form-item">
	  		<label class="layui-form-label">名字</label>
	  		<div class="layui-input-block">
	  		  <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
	  		</div>
	  </div>
	  <div class="layui-form-item">
	  		<label class="layui-form-label">年龄</label>
	  		<div class="layui-input-block">
	  		  <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
	  		</div>
	  </div>
	  <div class="layui-form-item">
	  		<label class="layui-form-label">身份证号</label>
	  		<div class="layui-input-block">
	  		  <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
	  		</div>
	  </div>
	  <div class="layui-form-item">
		<label class="layui-form-label">单选框</label>
		<div class="layui-input-block">
		  <input type="radio" name="sex" value="0" title="男">
		  <input type="radio" name="sex" value="1" title="女" checked>
		</div>
	  </div>
	  <div class="layui-form-item layui-form-text">
		<label class="layui-form-label">备注</label>
		<div class="layui-input-block">
		  <textarea placeholder="请输入内容" class="layui-textarea" rows="2"></textarea>
		</div>
	  </div>
	  <div class="layui-form-item">
		<div class="layui-input-block">
		  <button class="layui-btn" lay-submit lay-filter="*">提交修改</button>
		  
		</div>
	  </div>
	  <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
	</form>
	<script src="layui/layui.js"></script>
	<script>
	layui.use('form', function(){
	  var form = layui.form;
	  
	  //各种基于事件的操作，下面会有进一步介绍
	});
	</script>
	<script>
	        // 获取上传头像的input元素和头像预览的img元素
	        const avatarInput = document.getElementById('avatar-input');
	        const avatarPreview = document.getElementById('avatar-preview');
	
	        // 监听input元素的change事件
	        avatarInput.addEventListener('change', function(event) {
	            // 获取选中的文件
	            const file = event.target.files[0];
	            // 创建一个FileReader对象
	            const reader = new FileReader();
	            // 读取文件内容
	            reader.readAsDataURL(file);
	            // 监听FileReader对象的load事件
	            reader.addEventListener('load', function() {
	                // 将读取到的文件内容设置为头像预览的src属性
	                avatarPreview.src = reader.result;
	            });
	        });
	    </script>
</body>
</html>